<template>
  <view class="container">
    <!-- 搜索 -->
    <view class="header">
      <image src="../../static/icon/grarysearch.png" mode="" style="position: absolute; left: 50rpx; width: 28rpx; height: 28rpx"></image>
      <input type="text" placeholder="搜索老师" class="ipt" v-model="name" placeholder-class="txtwhite" @blur="search" />
    </view>
    <!-- 教师列表 -->
    <scroll-view scroll-y="true" style="box-sizing: border-box; width: 100%; height: 1100rpx; padding: 40rpx 28rpx" @scrolltolower="more">
      <view class="item" v-for="item in list" :key="item.id">
        <image :src="imgUrl + item.avatar" mode="aspectFill" style="width: 186rpx; height: 186rpx; margin: 0 4rpx"></image>
        <view class="right">
          <view class="top">
            <view style="display: flex; align-items: center; justify-content: space-between">
              <view class="name">{{ item.byname }}</view>
              <image src="../../static/icon/nan.png" mode="aspectFill" style="width: 42rpx; height: 42rpx"></image>
              <view class="zhiwei">{{ item.identity_name }}</view>
            </view>
            <view>{{ item.host_subject }}</view>
          </view>
          <!-- 教龄 -->
          <view style="margin: 12rpx 0 38rpx 0; font-family: PingFang SC, PingFang SC; font-weight: 500; font-size: 26rpx; color: #222222">教龄{{ item.teaching_len }}年</view>
          <view class="bottom">
            <view class="time">
              <view class="itembox" v-for="(item2, index) in item.keyword" :key="index">{{ item2 }}</view>
            </view>
            <view class="yueyuebtn" @click="cancelblack(item.id)">移除黑名单</view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      page: 1,
      name: '',
      imgUrl: ''
    };
  },
  methods: {
    // 获取黑名单列表
    async getblacklist() {
      const res = await uni.$http.post('/black/list', {
        type: '1',
        page: this.page,
        name: ''
      });
      console.log('黑名单列表', res);
      if (res.data.data.list.length != 0) {
        this.list.push(...res.data.data.list);
      } else {
        return uni.showToast({
          title: '数据已加载完毕',
          icon: 'none'
        });
      }
    },
    // 取消拉黑
    async cancelblack(id) {
      const res = await uni.$http.post('/black/add', {
        type: '1',
        black_people: id
      });
      this.page = 1;
      const res2 = await uni.$http.post('/black/list', {
        type: '1',
        page: this.page,
        name: ''
      });
      this.list = res2.data.data.list;
    },
    // 搜索
    async search() {
      this.page = 1;
      const res = await uni.$http.post('/black/list', {
        type: '1',
        page: this.page,
        name: this.name
      });
      this.list = res.data.data.list;
    },
    // 加载更多
    more() {
      this.page++;
      this.getblacklist();
    }
  },
  onLoad() {
    this.getblacklist();
    this.imgUrl = this.imgurl;
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  .header {
    display: flex;
    align-items: center;
    width: 100%;
    height: 90rpx;

    .ipt {
      box-sizing: border-box;
      width: 692rpx;
      height: 64rpx;

      padding-left: 80rpx;
      margin: 0 30rpx 0 28rpx;
      border-radius: 100rpx 100rpx 100rpx 100rpx;
    }
  }
  .item {
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;

    .right {
      flex: 1;
      .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .name {
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 30rpx;
          color: #222222;
        }
        .zhiwei {
          box-sizing: border-box;
          width: 104rpx;
          height: 40rpx;
          text-align: center;
          line-height: 40rpx;
          background: #eaedfd;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 22rpx;
          color: #3553e8;
          border-radius: 10rpx 10rpx 10rpx 10rpx;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }
      .bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .time {
          display: flex;
          align-items: center;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #222222;
          .itembox {
            box-sizing: border-box;
            height: 40rpx;
            font-weight: 500;
            font-size: 22rpx;
            color: #3553e8;
            padding: 4rpx 12rpx;
            background: #ffffff;
            margin-right: 10rpx;
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            border: 1rpx solid #3553e8;
            line-height: 30rpx;
          }
        }
        .yueyuebtn {
          box-sizing: border-box;
          width: 180rpx;
          height: 60rpx;
          text-align: center;
          line-height: 60rpx;
          background: #f1f1f1;
          border-radius: 100rpx 100rpx 100rpx 100rpx;

          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #333333;
        }
      }
    }
  }
}
</style>
